<template>
  <process-designer
    key="designerOpen"
    style="border:1px solid rgba(0, 0, 0, 0.1);"
    ref="modelDesigner"
    v-loading="designerData.loading"
    :bpmnXml="designerData.bpmnXml"
    :designerForm="designerData.form"
    @save="onSaveDesigner"
  />
</template>
<script>
import ProcessDesigner from '@/components/ProcessDesigner'
import flowDesignApi from '@/api/modules/flowManage/flowDesign'
export default {
  components: {
    ProcessDesigner
  },
  data () {
    return {
      // 流程id
      processId: '',
      designerData: {
        loading: false,
        bpmnXml: '',
        modelId: null,
        form: {
          processName: null,
          processKey: null
        }
      },
      lastformData:{}
    }
  },
  computed: {
    formData () {
      return this.$store.state.flowDesign.formData
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.processId = this.$route.query.id
      this.resetData()
      if (this.processId) {
        this.getProcessDetail()
      }
    },
    getProcessDetail () {
      this.designerData.loading = true
      flowDesignApi.getFlowDesinDetail(this.processId).then(res => {
        const { data } = res
        this.designerData.bpmnXml = data.bpmnXml || ''
        this.formData.definitionId = data.definitionId
        this.formData.fileSize = data.fileSize
        this.formData.fileCount = data.fileCount
        this.formData.remark = data.remark
        this.formData.cancelType = data.cancelType
        this.formData.canTouchNotice = data.canTouchNotice
      }).catch(res => {
        console.log(res.message || this.$t('5001'))
      }).finally(() => {
        this.designerData.loading = false
      })
    },
    handleDesigner (row) {
      this.designerData.title = '流程设计 - ' + row.modelName
      this.designerData.modelId = row.modelId
      this.designerData.form = {
        processName: row.modelName,
        processKey: row.modelKey
      }
    //   if (row.modelId) {
    //     this.designerData.loading = true
    //     getBpmnXml(row.modelId).then(response => {
    //       this.designerData.bpmnXml = response.data || ''
    //       this.designerData.loading = false
    //       this.designerOpen = true
    //     })
    //   }
    },
    onSaveDesigner (bpmnXml) {
      if(this.formData.fileCount==''){
        let {fileCount,...lastformData} = this.formData
        this.lastformData=Object.assign({}, lastformData) 
      }else{
        this.lastformData=Object.assign({}, this.formData)
      }
      const dataBody = {
        bpmnXml,
        ...this.lastformData
      }
      this.$elConfirm(this.$t('saveModelTip'), this.$t('tip'), {
        distinguishCancelAndClose: true,
        confirmButtonText: this.$t('yes'),
        cancelButtonText: this.$t('no')
      }).then(() => {
        this.confirmSave(dataBody, true)
      }).catch(action => {
        if (action === 'cancel') {
        }
      })
    },
    // 保存模型
    confirmSave (body) {
      const vm = this
      vm.designerData.loading = true
      const method = body.definitionId ? 'editFlowDesin' : 'addFlowDesin'
      flowDesignApi[method](body).then(() => {
        vm.$message.success(this.$t('successfullyOperation'))
        vm.$store.dispatch('tagsView/delView', this.$route.fullPath)
          .then(() => {
            vm.$router.replace({ path: '/flow/design' })
          })
      }).catch(res => {
        console.error(res.message || this.$t('5001'))
      }).finally(() => {
        // vm.$store.dispatch('tagsView/delView', this.$route.fullPath)
        //   .then(() => {
        //     vm.$router.replace({ path: '/flow/design' })
        //   })
        this.designerData.loading = false
      }) 
    },
    resetData () {
      this.designerData.bpmnXml = ''
      this.formData.definitionId = ''
      this.formData.fileSize = 10
      this.formData.fileCount = null
      this.formData.remark = ''
      this.formData.cancelType = 10
      this.formData.canTouchNotice = 0
    }
  }
}
</script>
